import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, 
  TouchableOpacity,TextInput
} from 'react-native';
import Toast, {DURATION} from 'react-native-easy-toast'
import SplitView from './SplitView'
import BackButton from '../../component/BackButton';
import MyButton from '../../component/MyButton';
import DeviceStorage from '../../common/DeviceStorage';
const dismissKeyboard = require('dismissKeyboard');
import {width, height} from '../../common/common';
import {BASEURL} from '../../api/api'
export default class FeedBack extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      title:'意见反馈',
      headerRight:(<View></View>),
      headerLeft:<BackButton navigation = {navigation}/>
    }
  };
  constructor(props){
    super(props);
    this.state = ({
      
    })
  }
  render(){
    return(
      <View style={{flex:1}}>
        <SplitView />
        <View>
        <TextInput 
          ref={this.props._ref}
          placeholder={this.props.placeholder}
          style={{height:100}}
          textAlignVertical='top'
          underlineColorAndroid="transparent"
          onChangeText={this.props.onChange}
          value={this.props.val}
          placeholderTextColor='#eee'
          secureTextEntry={this.props.secureTextEntry}
          keyboardType={this.props.keyboardType}
          multiline={true}
        />
        </View>
        <SplitView />
        <View style={{paddingLeft:30,paddingTop:30,paddingBottom:20}}>
          <View style={{width:width/6,height:width/6, borderColor:'#888',borderWidth:1,
            justifyContent:'center',alignItems:'center',marginBottom:15}}>
            <Image style={{width: '40%', height:'40%'}} source={require('../../images/mine/icon_add.png')}/>
          </View>
          <Text style={{fontSize:15}}>上传图片（最多4张图片）</Text>
        </View>
        <SplitView />

        <Input placeholder='留下您的姓名'/>
        <SplitView />
        <Input placeholder='留下您的联系方式'/>
        <View style={{backgroundColor:'#f0f0f0',flex:1}}>
          <MyButton text='提交'/>
        </View>
        
      </View>
    )
  }
}

class Input extends Component{
  render(){
    return(
      <View style={styles.inputView}>
        <TextInput 
          ref={this.props._ref}
          placeholder={this.props.placeholder}
          style={styles.searchInput}
          underlineColorAndroid="transparent"
          onChangeText={this.props.onChange}
          value={this.props.val}
          returnKeyType='search'
          placeholderTextColor='#aaa'
          keyboardType={this.props.keyboardType}
        />
      </View>
    )
  }
}
const styles = StyleSheet.create({
  searchInput:{
    paddingLeft:30,
    padding:0,
    flex:1,
    height: 46, 
    color: '#555',
    backgroundColor:'white',
    borderRadius:10,
  },
  inputView:{
    backgroundColor:'#f0f0f0',
    height:36
  },
})